import React from 'react';
import { Drawer, Form, Input, Button } from 'antd';
import { connect } from 'dva';
import { creator } from '@/utils/creator';
const { Item } = Form;

class Edit extends React.Component {
  save = () => {
    const { record, dispatch, toggle, getGoodsList } = this.props;
    this.props.form.validateFields(async (err, values) => {
      const res = await dispatch(
        creator('category/updateGoods', {
          categoryId: record.categoryId,
          ...values,
        }),
      );
      if (res.httpStatus === 200) {
        toggle();
        getGoodsList();
      }
    });
  };
  render() {
    const { visible, toggle, record } = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
    };

    return (
      <Drawer
        title="编辑"
        visible={visible}
        onClose={toggle}
        width={800}
        closable
      >
        <Form {...formItemLayout}>
          <Item label="品名">
            {getFieldDecorator('name', {
              initialValue: record.name,
            })(<Input />)}
          </Item>
          <Item label="成本价">
            {getFieldDecorator('costPrice', {
              initialValue: record.costPrice,
            })(<Input />)}
          </Item>
          <Item label="原价">
            {getFieldDecorator('originPrice', {
              initialValue: record.originPrice,
            })(<Input />)}
          </Item>
          <Item label="销售价">
            {getFieldDecorator('salePrice', {
              initialValue: record.salePrice,
            })(<Input />)}
          </Item>
          <Item label="重量">
            {getFieldDecorator('weight', {
              initialValue: record.weight,
            })(<Input />)}
          </Item>
          <Item label="保质期">
            {getFieldDecorator('expDate', {
              initialValue: record.expDate,
            })(<Input />)}
          </Item>
          <Item label="发货地">
            {getFieldDecorator('place', {
              initialValue: record.place,
            })(<Input />)}
          </Item>
          <Item label="备注">
            {getFieldDecorator('remark', {
              initialValue: record.remark,
            })(<Input />)}
          </Item>
          <Item>
            <Button type="primary" onClick={this.save}>
              保存
            </Button>
          </Item>
        </Form>
      </Drawer>
    );
  }
}

const WrappedEdit = Form.create()(Edit);

export default connect(({ category }) => ({ category }))(WrappedEdit);
